<template>
	<view class="President">
		<u-navbar :title="smallname" @leftClick="leftClick" :autoBack="true"></u-navbar>

		<view
			style=" overflow-y: scroll; margin-bottom: 40rpx;padding-top: 180rpx;box-sizing: border-box;padding-bottom: 150rpx;">
			<!-- 选择医院 -->
			<view class="President_item">
				<view class="President_item_title">就诊医院</view>
				<view class="President_item_right" @click="showHospital()">
					<view class="President_item_info">{{ form.hospital_name ? form.hospital_name : '请选择医院' }}</view>
					<view class="President_item_expand">
						<image src="../../../static/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 就诊人 -->
			<view class="President_item">
				<view class="President_item_title">就诊人</view>
				<view class="President_item_right" @click="Jen_jy">
					<view class="President_item_info">{{ form.patient_name ? form.patient_name : '请选择就诊人' }}</view>
					<view class="President_item_expand">
						<image src="../../../static/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 科室 -->
			<view class="President_item">
				<view class="President_item_title">就诊科室</view>
				<view class="President_item_right" @click="goDepartment()">
					<view class="President_item_info">{{ form.department_name ? form.department_name : '请选择服务科室' }}
					</view>
					<view class="President_item_expand">
						<image src="../../../static/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 期望就诊时间 -->
			<view class="President_item">
				<view class="President_item_title">就诊时间</view>
				<view class="President_item_right" @click="show = true">
					<view class="President_item_info">{{ time ? time_zhaunhuan(time) : '请选择就诊时间' }}</view>
					<view class="President_item_expand">
						<image src="../../../static/right.png"></image>
					</view>
				</view>
			</view>

			<!-- 服务名称 -->
			<!--  -->
			<view class="President_item"  v-if="smallname == '全程陪诊'||smallname == '代办跑腿'">
				<view class="President_item_title">陪诊时长</view>
				<view class="President_item_right">
					<view class="" style="display: flex; justify-content: space-between;margin-top: 10rpx;">
	<!-- 					<view class="btnc" :class="type == '1' ? 'active' : ''" @click="btnClick('1')">半天陪诊</view>
						<view class="btnc" :class="type == '2' ? 'active' : ''" @click="btnClick('2')">全天陪诊</view>
						<view class="btnc" :class="type == '3' ? 'active' : ''" @click="btnClick('3')">夜间陪诊</view> -->
						<view class="btnc" :class="type2 == '1' ? 'active' : ''" @click="btnClick2('1')">全天陪诊</view>
						<view class="btnc" :class="type2 == '2' ? 'active' : ''" @click="btnClick2('2')">半天陪诊</view>
						<view class="btnc" :class="type2 == '3' ? 'active' : ''" @click="btnClick2('3')">夜间陪诊</view>
					</view>
				</view>
			</view>
			<!-- 代办跑腿 -->
			<view class="President_item2" v-if="smallname == '代办跑腿'">
				<view class="President_item_title">代办跑腿</view>
				<view class="President_item_right">
					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10rpx;">
						<view class="btnc" :class="type2 == '22' ? 'active' : ''" @click="btnClick('22')">代办买药</view>
						<view class="btnc" :class="type2 == '33' ? 'active' : ''" @click="btnClick('33')">代取切片</view>
						<view class="btnc" :class="type2 == '44' ? 'active' : ''" @click="btnClick('44')">代取报告</view>
						<view class="btnc" :class="type2 == '55' ? 'active' : ''" @click="btnClick('55')">送取结果</view>
						<view class="btnc" :class="type2 == '66' ? 'active' : ''" @click="btnClick('66')">代办出入院</view>
					</view>
				</view>
			</view>
			<!-- 产康服务 -->
			<view class="President_item" v-if="smallname == '产康服务'">
				<view class="President_item_title">产康服务</view>
				<view class="President_item_right">
					<view class="" style="display: flex; justify-content: space-between;margin-top: 10rpx;">
						<view class="btnc" :class="type == '11' ? 'active' : ''" @click="btnClick('11')">盆底肌修复</view>
						<view class="btnc" :class="type == '12' ? 'active' : ''" @click="btnClick('12')">腹直肌修复</view>
						<view class="btnc" :class="type == '13' ? 'active' : ''" @click="btnClick('13')">淡化妊娠纹</view>
					</view>
				</view>
			</view>
			<view class="subject">
				<view class="demand">服务需求</view>
				<view class="region"><u--textarea v-model="form.remark" border="none" placeholder="请输入您的服务需求"
						placeholder-style="font-size:26rpx;" /></view>
			</view>
			<view class=""
				style="margin-top: 15rpx;padding: 0rpx 30rpx;box-sizing: border-box;width: 686rpx;margin-left: 30rpx;font-weight: 300;font-size: 24rpx;">
				<text style="font-weight: 500 ; font-size: 30rpx;">注意事项</text>
				<view class="" style="margin-top: 15rpx;">1.仅支持当地医院的服务。</view>
				<view class="" style="margin-top: 15rpx;">2.本项服务为陪诊，不包含除此之外的其他服务及费用。</view>
				<view class="" style="margin-top: 15rpx;">
					3.下单成功后，因个人原因，就诊时间前12小时内取消订单-扣除5%服务费用，就诊时间前6小时内取消订单-扣除10%服务费用，就诊时间前3小时内取消订单-扣除50%服务费用，就诊时间前2小时内取消订单-扣除100%服务费用。
				</view>
			</view>
		</view>

		<view class="bottom_footer">
			<view class="bottom_footer_left">
				总计：
				<text>{{ '￥' + form.cost_price }}</text>
			</view>
			<view class="bottom_footer_right"><button type="default" class="button" @click="submit">立即购买</button></view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="form.reserve_time" :minDate="timestamp"
			mode="datetime" @cancel="show = false" @confirm="handleDateTimeConfirm" />
		<!-- 日期 -->
		<!-- <u-calendar :show="show" @close="show = false"  v-model="form.reserve_time" @confirm.stop="handleDateTimeConfirm"></u-calendar> -->
		<!-- 科室 -->
		<u-picker :show="deptShow" :columns="departChildList" keyName="name" :closeOnClickOverlay="true"
			@cancel="deptShow = false" @confirm="handleDeptConfirm" />

		<u-picker :show="hospitalShow" :columns="list" keyName="name" :closeOnClickOverlay="true"
			@cancel="hospitalShow = false" @confirm="handleHospitalConfirm" />
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				isFirst: true,
				//倒计时
				s: 5,
				//医院选择展示
				hospitalShow: false,
				checked: false,
				//时间选择展示
				show: false,
				//科室选择展示
				deptShow: false,
				service: {},
				form: {},
				city: {},
				list: [],
				departChildList: [],
				state: 1, // 切换图片 state:进度条状态 1:填写订单 2:在线支付 3:预约挂号 4:服务完成
				// 时间戳
				timestamp: '',
				// 选择服务类型的id
				id: '',
				// 服务类型id
				fuwuTypeId: null,
				time: '',
				// 选择医院后的id
				hospital_id: '',
				mshow: false,
				smallname: '',
				type: 1,
				type2:1,
				keyid: 0,
				
				pricetypeAll: '',
				
				server_time:'全天'
			};
		},
		created() {
			_self = this;
		},
		onLoad(option) {
			// 选择五个圆圈服务类型后传过来的id

			this.smallname = option.smallname;

			if (this.smallname == '产康服务') {
				this.type = 11;
			} else if (this.smallname == '代办跑腿') {
				this.type = 22;
			} else if (this.smallname == '全程陪诊') {
				this.form.cost_price == 198.0;
			}
			if (option.id) {
				this.id = option.id;
			}
			if (option.service_id) {
				this.id = option.service_id;
			}
			if (option.hospital_id) {
				this.hospital_id = option.hospital_id;
			}
			this.keyid = option.id;
			this.datail();
			
			
		},
		mounted() {
			// let item = uni.getStorageSync('hospital')
			// this.form.hospital_name = item.name
		},
		onShow() {
			this.initAddress();
			this.init();
			this.postdepartment();
			this.isFirst = true;
			this.pricetypeApi()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		methods: {
			datail() {
				let self = this;

				this.get('/api/service/detail', {
					id: self.keyid
				}).then(res => {
					self.form.cost_price = res.common_price;
					self.form.service_name = res.name;
				});
			},
			init() {
				if (uni.getStorageSync('./fillin')) {
					this.service = uni.getStorageSync('./fillin');

					let department = uni.getStorageSync('department');
					this.form = {
						user_id: uni.getStorageSync('user_id'),
						service_id: this.id ? this.id : this.service.pid,
						service_name: this.service.name ? this.service.name : this.service.service_name,
						// cost_price: this.service.cost_price ? this.service.cost_price : '',
						cost_price: this.form.cost_price ? this.form.cost_price : '',
						hospital_id: this.service.hospital_id ? this.service.hospital_id : null,
						hospital_name: this.service.hospital_name ? this.service.hospital_name : '',
						patient_id: this.service.patient_id ? this.service.patient_id : null,
						patient_name: this.service.patient_name ? this.service.patient_name : '',
						reserve_time: this.service.reserve_time ? this.service.reserve_time : null,
						department_id: department.id ? department.id : null,
						department_name: department.name ? department.name : '',
						remark: this.service.remark ? this.service.remark : '',
						server_time:this.server_time
					};
				}
				this.getHospitalList();
			},

			leftClick() {
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组

				if (routes.length <= 1) {
					// this.gotoPage('/pages/index/index');
				} else {
					// uni.navigateBack(-1);
				}
			},
			// 获取指定地区的医院信息
			getHospitalList() {
				let cityID = uni.getStorageSync('city');
				console.log(cityID, '酷酷酷');
				this.list = [];
				// 接口有问题暂时先注释 改好了在打开注释去掉上面的请求
				this.post('/api/Zrecduzp/huoquyongyouzhidingfuwuleixingdeiyiyuan', {
					service_id: this.keyid
				}).then(res => {
					this.list.push(res.data);
					if (this.form.hospital_id) {
						this.form.hospital_name = this.list[0].filter(item => item.id === this.service
							.hospital_id)[0].name;
					}
				});
			},
			// 选择确定医院
			handleHospitalConfirm(e) {
				this.form.hospital_id = e.value[0].id;
				this.hospital_id = e.value[0].hospital_id;
				this.form.hospital_name = e.value[0].name;
				this.hospitalShow = false;
				this.form.cost_price = e.value[0].common_price;
				this.form.other_services = this.postdepartment();
			},
			submit() {
				if (this.type == 1) {
					this.server_time = '全天'
				} else if (this.type == 2) {
					this.server_time = '半天'
				} else if (this.type == 3) {
					this.server_time = '夜间'
				}
				if (!this.form.hospital_id) {
					uni.showToast({
						title: '医院不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.form.patient_id) {
					uni.showToast({
						title: '就诊人不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.form.reserve_time) {
					uni.showToast({
						title: '就诊时间不能为空',
						icon: 'none'
					});
					return;
				}

				// if (!this.form.department_id) {
				// 	uni.showToast({
				// 		title: "科室不能为空",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.form.service_id = this.keyid;
				this.post('/api/Qunvxckt/lizhijifu', this.form).then(res => {
					uni.requestPayment({
						privider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function(payRes) {
							uni.removeStorageSync('./fillin');
							// 下单删除科室信息
							uni.removeStorageSync('department');
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/Order/Order'
								});
							}, 1000);
						},
						fail: function(err) {
							// 下单删除科室信息
							uni.removeStorageSync('./fillin');
							uni.removeStorageSync('department');
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/Order/Order'
								});
							}, 1000);
						}
					});
				});
			},
			add0(m) {
				return m < 10 ? '0' + m : m;
			},
			btnClick(val) {
				// this.type2 = val;
				this.type = val;
				console.log(val, 'duoshao');
				switch (val) {
					case '1':
						this.form.cost_price = this.pricetypeAll.price1;
						this.form.other_services = '全天陪诊';
						return;
					case '2':
						this.form.cost_price = this.pricetypeAll.price2;
						this.form.other_services = '半天陪诊';
						return;
					case '3':
						this.form.cost_price = this.pricetypeAll.price3;
						this.form.other_services = '夜间陪诊';
						return;
					case '11':
						this.form.other_services = '盆底肌修复';
						return;
					case '12':
						this.form.other_services = '腹直肌修复';
						return;
					case '13':
						this.form.other_services = '淡化妊辰纹';
						return;
				}
			},
			
			btnClick2(val) {
				this.type2 = val;
				console.log(val, 'duoshao');
				switch (val) {
					case '1':
						this.form.cost_price = this.pricetypeAll.price1;
						this.form.other_services = '全天陪诊';
						return;
					case '2':
						this.form.cost_price = this.pricetypeAll.price2;
						this.form.other_services = '半天陪诊';
						return;
					case '3':
						this.form.cost_price = this.pricetypeAll.price3;
						this.form.other_services = '夜间陪诊';
						return;
					case '11':
						this.form.other_services = '盆底肌修复';
						return;
					case '12':
						this.form.other_services = '腹直肌修复';
						return;
					case '13':
						this.form.other_services = '淡化妊辰纹';
						return;
				}
			},
			// 显示服务价格
			pricetypeApi() {
				let city = this.city.text
				console.log(this.city.text, "this.city.textthis.city.text")
				this.post('/api/Newadd/pricetype', {
					id: this.keyid,
					city: this.city.text
				}).then((res) => {
					this.pricetypeAll = res
				})
			},
			timeFormat(shijianchuo) {
				//shijianchuo是整数，否则要parseInt转换
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + '年' + this.add0(m) + '月' + this.add0(d) + '日';
			},
			//时间选择器点击确认
			handleDateTimeConfirm(e) {
				this.time = e.value;
				this.show = false;
				this.form.reserve_time = e;
			},
			// 科室以及科室名称
			handleDeptConfirm(e) {
				this.deptShow = false;
				this.form.department_id = e.value[0].id;
				this.form.department_name = e.value[0].name;
			},
			//时间展示格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}

				if (type === 'minute') {
					return `${value}分`;
				}

				return value;
			},
			//初始化地址
			initAddress() {
				if (uni.getStorageSync('city')) {
					this.city = uni.getStorageSync('city');
				} else {
					this.city = {
						text: '滨州市',
						value: 1513
					};
				}
			},
			Room() {
				if (this.form.hospital_name) {
					this.deptShow = true;
				} else {
					uni.showToast({
						title: '请先选择医院',
						icon: 'none'
					});
				}
			},
			postdepartment() {
				let that = this;
				that.timestamp = Date.parse(new Date());
				if (!this.form.hospital_id) {
					return;
				}
				this.post('/api/Zrecduzp/zhidinguyiyuandefukeshihuoqu', {
					hospital_id: this.form.hospital_id
				}).then(res => {
					let arr = [];
					for (let key in res) {
						res[key].forEach(item => {
							arr.push({
								id: item.id,
								name: item.name
							});
						});
					}
					this.departChildList.push(arr);
				});
			},
			Jen_jy() {
				let service_id = this.id;

				//刷新缓存
				uni.setStorageSync('./fillin', this.form);
				uni.navigateTo({
					// 传递当前选择的服务类型的id
					url: `../../My/Administration/patient?type=3&service_id=${service_id}`
					// url: `../../My/Administration/patient?type=3`
				});
			},
			// 去往科室页面
			goDepartment() {
				if (this.form.hospital_name) {
					uni.setStorageSync('./fillin', this.form);
					uni.navigateTo({
						url: `../department/department?hospital_id=${this.hospital_id}`
					});
				} else {
					uni.showToast({
						title: '请先选择医院',
						icon: 'none'
					});
				}
			},
			// 打开选择医院列表
			showHospital() {
				this.hospitalShow = true;
			}
		}
	};
</script>

<style lang="scss">
	// 文本域背景色
	.u-textarea.data-v-09988a29 {
		background: #f9f9f9 !important;
	}

	.President {
		background-color: #f9f9f9;
	}

	.btnc {
		font-size: 18rpx;
		height: 50rpx;
		border: 1rpx solid #59d2b0;
		text-align: center;
		line-height: 50rpx;
		margin-right: 15rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-top: 15rpx;
	}

	.active {
		background-color: #59d2b0;
		color: #ffffff;

		height: 50rpx;
		border: 1rpx solid #999999;
		text-align: center;
		line-height: 50rpx;
	}

	.President_item {
		width: 590rpx;
		height: 94rpx;
		margin: 15rpx auto;
		padding: 0 40rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 94rpx;

		.President_item_title {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.President_item_right {
			display: flex;
			flex-wrap: nowrap;

			.President_item_info {
				font-size: 24rpx;
				color: #666666;
			}

			.President_item_expand {
				width: 38rpx;
				height: 84rpx;
			}
		}
	}

	.President_item2 {
		width: 590rpx;

		margin: 15rpx auto;
		padding: 20rpx 40rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 94rpx;

		.President_item_title {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.President_item_right {
			width: 75%;
			display: flex;
			flex-wrap: nowrap;

			.President_item_info {
				font-size: 24rpx;
				color: #666666;
			}

			.President_item_expand {
				width: 38rpx;
				height: 84rpx;
			}
		}
	}

	.President_item_expand image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 38rpx;
		margin-left: 10rpx;
	}

	.President_item1 {
		// width: 590rpx;
		padding: 8rpx 40rpx;
		background: #fff;
		// box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);

		.President_item_title1 {
			font-size: 26rpx;
			font-weight: bold;
			color: #000000;
		}

		.President_item_right1 {
			display: flex;
			flex-wrap: nowrap;

			.President_item_info1 {
				font-size: 24rpx;
				color: #666666;
			}

			.President_item_expand1 {
				width: 38rpx;
				height: 84rpx;
			}
		}
	}

	.subject {
		height: 300rpx;
		margin-bottom: 40rpx;
		padding: 0 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.demand {
			width: 128rpx;
			height: 42rpx;
			padding-top: 35rpx;
			line-height: 42rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.region {
			background-color: #f9f9f9;
			margin-top: 20rpx;
			border-radius: 20rpx;
			height: 160rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.bottom_footer {
		width: 100%;
		height: 140rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;

		.bottom_footer_left {
			height: 48rpx;
			margin: 42rpx;
			color: #666666;
			font-size: 32rpx;
			line-height: 48rpx;
		}

		.bottom_footer_right {
			margin: 20rpx 40rpx;
		}
	}

	.bottom_footer_left text {
		font-size: 36rpx;
		color: #fb4b6c;
		font-weight: bold;
	}

	.button {
		background-color: #59d2b0 !important;
		color: #ffffff !important;
		width: 220rpx;
		height: 90rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		line-height: 90rpx;
	}
</style>